import React, { useEffect, useState, useLayoutEffect } from "react";
import { connect } from 'react-redux'
import Scroll from '../../baseUI/scroll'
import Title from '../../components/title/title.jsx'
import SearchInput from '../../components/searchInput/SearchInput'
import './Server.less'
import ImgList from '../../components/server/imgList/ImgList'
import CarList from '../../components/server/carList/carList'
import Select from '../../components/server/select/Select.jsx'
import Like from '../../components/server/like/Like.jsx'
import * as actionTypes from '../server/store/actionCreators'
import * as api from '@/api'
import { useHistory } from 'react-router-dom'

const Server = (props) => {
    // console.log(props,'props');
    const { serverdata } = props
    // const { mydata } = props
    const { getServerDispatch } = props
    const [number, setNumber] = useState(0)
    console.log(serverdata, '????????????????????????');
    let history = useHistory()
    // console.log(history, 'history');
    // useEffect(() => {
    //     getServerDispatch()
    // }, [])
    useEffect(() => {
        getServerDispatch()
    }, [])

    useEffect(() => {
        window.addEventListener('scroll',
            // handleScroll

            console.log(window.pageYOffset)
        );
    }, [window.pageYOffset])
    useEffect(() => {
        window.scrollTo(100, 500);
    }, [])

    // const handleScroll = (e) => {
    //     var header = document.getElementById('header'); //定义一个dom节点为'header'的header变量
    //     if (window.pageYOffset >= 300) {  //if语句判断window页面Y方向的位移是否大于或者等于导航栏的height像素值
    //         console.log('dayusanbai');
    //         //   header.classList.add('header_bg');  //当Y方向位移大于5rem时，定义的变量增加一个新的样式'header_bg'
    //     } else {
    //         console.log('xiaoyusanbai');
    //         //   header.classList.remove('header_bg'); //否则就移除'header_bg'样式
    //     }

    // }
    // const scrollTo = () =>{
    //     scrollTo(x, y, time = 300) {
    //         Scroll.scrollTo(0, 0, time);
    //       }
    // }
    return (
        <div className="main" >
            <Title />
            {/* <Scroll
                direction="vertical"  // 垂直滚动
                refresh={false}   // 下拉是否刷新，刷新会重新渲染
                id="header"
                
                
            > */}
            <Scroll
                direction={"vertical"}
                refresh={true}
                // onScroll={
                //     (e) => {
                //         // forceCheck()
                //         // console.log(e);
                //         // console.log(e.y);
                //         if (e.y < -1142) {
                //             setDisplay(true)
                //         } else {
                //             setDisplay(false)
                //         }
                //     }
                //     // forceCheck()

                // }
                // pullUp={handlePullUp}
                // pullDown={handlePullDown}
                 >
                <div className="main-padding" >
                    <SearchInput handleOnclick={() => { handleOnclick() }}
                        searchBoxHandleOnclick={() => history.push('/search')} />
                    <CarList />
                    <ImgList />
                    <Select />
                    <Like />
                    <div className="label-all" onClick={scrollTo}>

                        {
                            serverdata.map((item) => {
                                return (
                                    <div className="lable" key={item.id}>

                                        <div className="lable-img" >
                                            <img referrer="no-referrer|origin|unsafe-url" src={item.logo} alt="" />
                                        </div>
                                        <div className="lable-name"  >
                                            {item.name}

                                        </div>
                                    </div>
                                )

                            })
                            // if(serverdata){
                            //     console.log('111')
                            // }else 
                            // {console.log('222')}
                            // serverdata?<div>{serverdata[0]?.id}</div>:console.log('2')
                        }


                    </div>






                </div>

            </Scroll>
        </div>
    )
}

const mapStateToProps = (state) => {
    // console.log(state.server.serverdata,'////');
    return {
        serverdata: state.server.serverdata
    }
}
const mapStateToDispatch = (dispatch) => {
    return {
        getServerDispatch() {
            console.log(actionTypes, 'actionTypes');
            dispatch(actionTypes.getServerData())
        }
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(Server)











